<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list">
        <li>
          <input type="checkbox" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li>
        <li>
          <input type="checkbox" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li>
        <li>
          <input type="checkbox" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li>
      </ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      </footer>
    </section>
    <script>
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: false,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: true,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: false,
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];

      // 一、根据数据渲染dom结构；
      // 上下横跳
      function renderDom(arr) {
        var listEle = document.querySelector("#list");
        listEle.innerHTML = ""; //清空原本的数据
        //根据数据生成dom结构
        data.forEach((item, key) => {
          // console.log(item);
          var liEle = document.createElement("li");
          liEle.innerHTML = `<input type="checkbox" ${
            item.checked ? "checked" : ""
          }/>
          <span>${item.title}</span>
          ${
            item.collect
              ? `<a href="javascript:;" class="cancelCollect">
                取消收藏
              </a>`
              : `<a href="javascript:;" class="collect">
                收藏
              </a>`
          }<a href="javascript:;" class="remove">删除</a>`;
          liEle.onclick = (e) => {
            var target = e.target;
            if (target.nodeName === "INPUT") {
              // console.log("点击了checkbox", key);
              //改变对应的数据
              data[key].checked = target.checked;
              // console.log(data);
              // 判断是否全选
              var res = data.every((item) => item.checked);
              // console.log(res);
              document.querySelector("#checkAll").checked = res;
            }
            if (target.classList.contains("collect")) {
              console.log("点击了收藏按钮");
              arr[key].collect = true;
              renderDom(data);
            }
            if (target.classList.contains("cancelCollect")) {
              console.log("点击了取消收藏按钮");
              arr[key].collect = false;
              renderDom(data);
            }
            if (target.classList.contains("remove")) {
              console.log("点击了删除", key);
              var res1 = arr.splice(key, 1);
              //splice 两个值 第一个是下标开始  第二个是截取的个数 ,这里就是我点了第一个,下标0,从0开始截取,截取一个,也就是第一条歌单,原数组直接显示被截取之后的样子,返回值是截取的数据 也就是res1
              console.log(res1);
              console.log(arr);
              renderDom(data);
            }
          };
          listEle.appendChild(liEle);
        });
      }
      renderDom(data);
      var checkAllEle = document.querySelector("#checkAll");
      checkAllEle.onclick = function () {
        //把所有的数据里的checked变成和勾选状态一致
        data.forEach((item) => {
          item.checked = this.checked;
        });
        renderDom(data);
      };
      //数据驱动  先改数据 再渲染视图
    </script>
  </body>
</html>
